<template>
  <div>
    <nut-popup
      :style="{ height: '90%' }"
      v-model="showsongs"
      position="bottom"
      @close="closelist(tname)"
      v-if="this.songsyoulike"
    >
      <nut-swiper
        :paginationVisible="true"
        direction="horizontal"
        :swiperData="songsyoulike"
        :loop="true"
        @slideChangeStart="changenum"
      >
        <div v-for="(item,index) in songsyoulike" :key="index" class="nut-swiper-slide" >
          <div class="header">
            <img :src="item.picUrl" alt />
            <div class="title">
              <h3>{{item.name}}</h3>
            </div>
          </div>
          <div class="main" v-if="songsdetail !=''" >
            <nut-cell
              :is-link="true"
              :show-icon="true"
              v-for="item in songsdetail[index]"
              :key="item.id"
            >
              <span slot="title">{{item.name}}</span>
              <span slot="sub-title">原唱：{{item.ar[0].name}}</span>
            </nut-cell>
          </div>
        </div>
      </nut-swiper>
    </nut-popup>
  </div>
</template>
<script>
import { url, recommendresource,playlistdetail } from "../../api/api";
export default {
  props: ["toshowlike", "tname", "closelist"],
  data() {
    return {
      songs: "",
      showsongs: false,
      songsyoulike: [], //  猜你喜欢歌单详情
      songsdetail:[],  //    歌单的歌曲详情
      num:0,
    };
  },
  mounted() {},
  methods: {
      changenum(pageSize,el){
          this.num = pageSize
      },
    //  获取每日推荐歌单
    getrecommendresource() {
      this.$axios.get(`${url}${recommendresource}`).then(response => {
        if (response.status >= 200 && response.status < 300) {
          this.songsyoulike = response.data.recommend;
          for(let i in this.songsyoulike){
              this.getplaylistdetail(this.songsyoulike[i].id)
              this.songsdetail=[]
          }

        } else {
          console.log(response.message);
        }
      });
    },
     //  获取歌单歌曲的详情
    getplaylistdetail(id) {
      this.$axios
        .get(url + playlistdetail, {
          params: {
            id: id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {                   
              if(data.data.playlist.tracks.length>10){
                  data.data.playlist.tracks.length=10
              }
              this.songsdetail.push(data.data.playlist.tracks)
            }
          },
          err => {
            this.$notify.danger(err.data.msg);
          }
        );
    },
  },
  watch: {
    toshowlike() {
      this.showsongs = this.toshowlike;
      if (this.toshowlike == true) {
        this.getrecommendresource();
      }
    }
  }
};
</script>
<style scoped>
.header {
  padding: 30px;
  display: flex;
}
.header img {
  width: 100px;
  height: 100px;
  border-radius: 15px;
}
.header .title {
  display: inline-block;
  text-align: center;
  line-height: 40px;
  width: 200px;
  font-weight: 700;
  margin-left: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.nut-swiper{
    height: 100%;
    
}
.main {
    width: 100%;
    height: 350px;
	overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll; /*y轴滚动*/
}

</style>